<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片转base64</title>
    <script
  src="https://code.jquery.com/jquery-1.12.4.js"
  integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
  crossorigin="anonymous"></script>
</head>
<body>
        <input accept="image/*" name="upimage" id="upload_file" type="file">
        <input type="text" id="base64_output" name="Word">
        <!-- <textarea id="base64_output" name="Word" style=" width:820px"></textarea> -->
        <script type="text/javascript">
   
            $("#upload_file").on('change',function(){
                getbase64();
            })

            function getbase64() {
                var file = $('#upload_file')[0].files[0];
                reader = new FileReader();  //本地预览
                reader.onload = function(){
                    var ImgFileSize = reader.result.substring(reader.result.indexOf(",") + 1)
                    // .length;//截取base64码部分（可选可不选，需要与后台沟通）
                    console.log(ImgFileSize)
                    $('#base64_output').val(reader.result);
                    $('body').append('<canvas id="canvas" width="400px" height="300px" style="border: 1px solid red;"></canvas>');
                    // console.log(reader.result)
                    var img = new Image();
                    var ctx=$('#canvas')[0].getContext("2d");
                      //指定图片的URL
                    img.src = reader.result;
                    //浏览器加载图片完毕后再绘制图片
                    img.onload = function(){
                        //以Canvas画布上的坐标(10,10)为起始点，绘制图像
                        ctx.drawImage(img,-100,0);      
                        console.log($('#base64_output').val().length)    
                    };
                }
                reader.readAsDataURL(file);    //Base64
            }
        </script>
</body>
</html>